<template>
	<view class="winners-list" v-if="luckyDrawHistoryList.length">
		<view class="list-title-container">
			中奖记录
		</view>
		<view class="list-header-container">
			<view class="header-item">
				用户
			</view>
			<view class="header-item">
				时间
			</view>
			<view class="header-item">
				奖励
			</view>
		</view>
		<view class="scroll-column-container">
			<view class="list-wrapper first">
				<view class="list-item" v-for="(item,index) in luckyDrawHistoryList" :key="item.customer">
					<view class="item-user">
						{{item.customer}}
					</view>
					<view class="item-time">
						{{item.time}}
					</view>
					<view class="item-prize">
						￥{{item.award}}
					</view>
				</view>
			</view>
			<view class="list-wrapper second" >
				<view class="list-item" v-for="(item,index) in luckyDrawHistoryList" :key="item.customer">
					<view class="item-user">
						{{item.customer}}
					</view>
					<view class="item-time">
						{{item.time}}
					</view>
					<view class="item-prize">
						￥{{item.award}}
					</view>
				</view>
			</view>
			<view class="list-wrapper third" >
				<view class="list-item" v-for="(item,index) in luckyDrawHistoryList" :key="item.customer">
					<view class="item-user">
						{{item.customer}}
					</view>
					<view class="item-time">
						{{item.time}}
					</view>
					<view class="item-prize">
						￥{{item.award}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		ref,
		Ref,
		defineProps
	} from 'vue';
	const isFirstScrollListShow: Ref < boolean > = ref(true);
	
	const props = defineProps({
		luckyDrawHistoryList:{
			type:Array,
		}
	})

	const animationend = () => {
		console.log('animationend')
		isFirstScrollListShow.value = false;
	}
</script>

<style scoped lang="scss">
	@import "./winnersList.scss";
</style>
